<template>
	<view class="control" :style="{paddingBottom:selectionArr.length > 1 ?'400rpx' : '200rpx'}">
		<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
		<view class="time-list">
			<view @click="selectDay(item,index)" :class="{'active':dayActive == index}" class="time-item"
				v-for="(item,index) in dataList" :key="index">
				<view class="day">{{item.weeks}}</view>
				<view class="date">{{item.mouth}}/{{item.day}}</view>
			</view>
		</view>
		<!-- <u-notice-bar fontSize="12" direction="column" :text="['节假日期间预定场地不得退订，若要退订请联系客服']"></u-notice-bar> -->
		<u-notice-bar fontSize="12" :text="text1"></u-notice-bar>
		<view v-if="panel" style="width: 100%; height: 100vh;background-color:#000; 
      opacity: 0.4; 
      position: absolute;
      top:0;
      left:0;z-index: 999;">
		</view>
		<view v-if="pan_img" @click="pan_img = false" style="width: 100%; height: 100%;background-color:#000;
		position: absolute;
		top:0;
		left:0;z-index: 999;">
			<!-- <image style="background-size: 100% 100%;width: 100%; max-height: 100%; margin-top: 60%;" :src="court_pic"
				@longtap="shareImg(court_pic)" mode=""></image> -->
			<image style="background-size: 100% 100%;width: 100%; max-height: 100%; margin-top: 60%;" :src="court_pic"
				@longpress="handledownload(court_pic)" mode=""></image>
		</view>
		<!-- 场地预定表格 -->
		<view class="table-box">
			<scroll-view scroll-y :class="selectlength > 0 ? 'table_sty' : 'table'">
				<view class="table-box">
					<view class="tr colum" style="z-index: 99;">
						<view class="td date" v-for="(item,index) in fieldlist" :key="index">
							<view style="font-weight: bold;" class="date-1" v-if="index !== 0">{{item.start_time}}
							</view>
							<view style="font-weight: bold;" v-if="index !== 0">{{item.end_time}}</view>
						</view>
					</view>

					<scroll-view scroll-x class="" style="display: flex; flex-direction: column;background-color: #fff;"
						@scroll="handleScroll">
						<view class="" style="position: fixed;white-space: nowrap;overflow-x: auto; z-index: 1;flex: 1;"
							:style="{ transform: `translateX(${-scrollX}px)` }">
							<view class="tar" style=" background-color: #fff;">
								<view class="tad name" v-for="(item,index) in fieldNoList">
									<view>{{item.seat_number}}</view>
								</view>
							</view>
						</view>
						<view>
							<view class="tr">
								<view class="td name" v-for="(item,index) in fieldNoList">
									<view>{{item.seat_number}}</view>
								</view>
							</view>
							<view class="tr" v-for="(line,index) in fieldlist" :key="index">
								<view class="td" v-for="(colum,indexs) in line.fieldlist_s" :key="indexs">
									<view class="price-box" @click="selectData(colum,line, 1,index,indexs)">
										<view v-if="line.isToday == 1">
											<view class="price" v-if="colum.time_price && colum.time_price != '' ">
												<view
													:class="!able_list && line.end_time > time_list ? 'select-blue' :  colum.text == able_list && line.end_time > time_list ? 'select-blue' : 'select-ash'"
													:style="{ backgroundImage: 'url('+colum.backgroundImage+')',backgroundColor:colum.background }"
													style="width: 114rpx; height: 70rpx;display: flex;align-items: center;justify-content: center;background-size: 100% 100%;">
													<view v-show="!colum.select" style="padding-left: 2rpx;">
														￥{{colum.time_price}}
													</view>
												</view>
											</view>
											<view class="price" v-else>
												<view class="select-ash">
													<view v-show="!colum.select" style="padding-left: 2rpx;"></view>
												</view>
											</view>
										</view>
										<view v-else>
											<view class="price" v-if="colum.time_price && colum.time_price != '' ">
												<!-- :style="{ backgroundImage: 'url('+colum.backgroundImage+')',backgroundColor:colum.background }" -->
												<view
													:class="!able_list ? 'select-blue' :  colum.text == able_list ? 'select-blue' : 'select-ash'"
													:style="{ backgroundImage: 'url('+colum.backgroundImage+')',backgroundColor:colum.background }"
													style="width: 114rpx; height: 70rpx;display: flex;align-items: center;justify-content: center;background-size: 100% 100%;">
													<view v-show="!colum.select" style="padding-left: 2rpx;">
														￥{{colum.time_price}}
													</view>
												</view>
											</view>
											<view class="price" v-else>
												<view class="select-ash">
													<view v-show="!colum.select" style="padding-left: 2rpx;"></view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</scroll-view>
		</view>

		<view class="footer">
			<scroll-view class="footer-3" scroll-x v-if="selectionArr.length > 0">
				<view class="flex-align">
					<view class="item" v-for="(im,indexx) in selectionArr" :key="indexx">
						<view class="icon" @click="removeData(im,indexx)">
							<u-icon name="close-circle-fill" color="#000000" size="17"></u-icon>
						</view>
						<view class="item-time">{{im.month_day}}({{im.week}})</view>
						<view class="item-con">
							<view class="item-con1">{{im.num}}</view>
							<view class="item-con1">{{im.dateTimes}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="footer-2 flex-align" v-if="selectionArr.length === 0">
				<view class="info-1 flex-align" @click="aspect_img">
					<image mode="aspectFit"
						src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f77e9d015003acafd9b31ddd963026b9cab10965.png">
					</image>
					<view>场地布局图</view>
				</view>
				<view class="info-2 flex-between">
					<view class="tag-item flex-align">
						<view class="color color1"></view>
						<view>已售</view>
					</view>
					<view class="tag-item flex-align">
						<view class="color color2"></view>
						<!-- <view class="color color3"></view> -->
						<view>可选</view>
					</view>
					<view class="tag-item flex-align">
						<view class="color color4"></view>
						<view>已选</view>
					</view>
				</view>
			</view>
			<view class="footer-1 flex-between">
				<view class="flex-align" v-if="selectionArr.length > 0">
					<view class="info-1">总计：</view>
					<view class="info-2">
						￥<text>{{amount(money)}}</text>
					</view>
				</view>

				<view class="flex-align" v-if="selectionArr.length === 0">
					<view class="info-1">总计：</view>
					<view class="info-2">
						￥<text>00.00</text>
					</view>
				</view>
				<view class="btn_n" v-if="selectionArr.length > 0" @click="miniClickCourts">预定场地</view>
				<view class="btn" v-else>预定场地</view>
			</view>
		</view>
	</view>
</template>

<script>
	const train = require("@/api/train/index.js");
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	export default {
		components: {
			QSNavbar,
		},
		data() {
			return {
				text1: '',
				panel: true,
				each_num: {
					maxbooknum: '', // 一次订多少个场地
					maxbooknum_s: '', // 一次订多少个人
					maxbooknum_as: '', // 一次订多少个团
					days: '', // 选择天数
					open_time_start: '',
					open_time_end: '',
				},
				data_time: true,
				timne_s: '',
				dayActive: 0,
				dataList: [], //日期
				selectList: [],
				fieldNoList: [],
				able_list: null,
				able_s: null,
				time_list: '',
				time_a: null,
				fieldlist: [],
				selectionArr: [], // 选中的场地
				current_year_month: '', //年月日
				current_month_day: '', //几月几号
				today: '', //日期
				line_time: '', //时间戳
				weeks_data: '', //星期几
				money: 0, //总计价格
				images: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/4265ed81971303fe0bf340c7d26b82672aa2e668.png',
				colum: {},
				timne_t: '',
				item_time: '',
				it: '',
				pan_img: false,
				seat_id: '',
				court_id: '',
				date_d: '',
				msg_code: '',
				tj_price_id: '',
				tj_price: '',
				tj_field_id: '',
				tj_field_type: '',
				tj_time_id: '',
				tj_meal_id: '',
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#000000",
					},
					{
						type: "text",
						text: "",
						width: 70,
						weight: "bold",
						color: "#000000",
						textAlign: "left",
					},
				],
				venueDetail: '',
				pid: '',
				venue_id: '',
				windows: "",
				court_pic: '',
				selectlength: 0,
				already: {},
				fieldPool: [],
				fieldPoolNum: [],
				isLoading: false, // 加载状态标记
				scrollX: 0, // 用于存储水平滚动的位置
			}
		},

		created() {
			this.selectionArr = []
			this.money = ''
		},
		onLoad(options) {
			this.pid = options.pid;
			this.venueDetail = options.venueDetail;
			this.navbarItems_1[1].text = options.name;
			this.product_id = options.id
			this.court_id = options.court_id
			this.venue_id = options.venue_id
			this.windows = options.windows
			var _this = this
			if (uni.getStorageSync("openid") == '') {
				uni.showToast({
					title: '请登录！',
					icon: 'exception',
					duration: 850
				});
				uni.reLaunch({
					url: '/pages/personal/personal'
				})
			}

			let data_s = {
				app_id: this.$https.weixinAppId,
				project_id: getApp().globalData.projectId,
				product_id: this.product_id,
				open_id: uni.getStorageSync("openid"),
				date: '',
				venue_id: this.venue_id
			};
			train.checkHot(data_s).then(result => {
				if (result.code == 0) {
					this.panel = true
					// uni.showToast({
					// 	title: result.info,
					// 	duration: 2000
					// })
					// setTimeout(() => {
					// 	uni.navigateBack()
					// }, 2000)
					uni.showModal({
						title: result.info,
						// content: data[0],
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack()
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			})

			let datas = {
				app_id: this.$https.weixinAppId,
				project_id: getApp().globalData.projectId,
				open_id: uni.getStorageSync("openid"),
			};
			train.clearCacheAndDataBase(datas).then(result => {
				if (result.code == 1) {}
			})


			_this.getCurrentMonthDay()
			_this.getFieldNoList()
			_this.getCourtProduct()
			// let fieldNoList = this.fieldNoList
			// fieldNoList.push('11')
			// if (this.time_list > '08:00' && this.time_list < '24:00') {
			// 	this.panel = false
			// }
			let data = {
				app_id: this.$https.weixinAppId,
				project_id: getApp().globalData.projectId,
				product_id: this.product_id
			};
			train.getCourtProduct(data).then(result => {
				_this.each_num.open_time_end = result.data.result.open_time_end
				_this.each_num.open_time_start = result.data.result.open_time_start
			})

			if (_this.time_list > _this.each_num.open_time_start && _this.time_list > _this.each_num.open_time_end) {
				_this.panel = false
			}

		},
		onPullDownRefresh() {
			var _this = this
			_this.selectionArr = []
			_this.money = ''
			_this.fieldlist = []
			_this.dayActive = 0
			this.able_list = null
			_this.getCurrentMonthDay()
			_this.getFieldNoList()
			_this.getCourtProduct()
			_this.getDataList()
			_this.getCourtPrice()
			let datas = {
				app_id: this.$https.weixinAppId,
				project_id: getApp().globalData.projectId,
				open_id: uni.getStorageSync("openid"),
			};
			train.clearCacheAndDataBase(datas).then(result => {
				if (result.code == 1) {}
			})

			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
			var _this = this
			_this.selectionArr = []
			_this.money = ''
			_this.fieldlist = []
			// _this.dayActive = 0
			this.able_list = null
			_this.getCurrentMonthDay()
			_this.getFieldNoList()
			_this.getCourtProduct()
			_this.getDataList()
			_this.getCourtPrice()
			let datas = {
				app_id: this.$https.weixinAppId,
				project_id: getApp().globalData.projectId,
				open_id: uni.getStorageSync("openid"),
			};
			train.clearCacheAndDataBase(datas).then(result => {
				if (result.code == 1) {}
			})


		},
		methods: {
			handleScroll(e) {
				// 更新水平滚动的位置
				this.scrollX = e.detail.scrollLeft;
			},
			// 金额计算保留两位小数
			amount(value) {
				return parseFloat(value).toFixed(2);
			},
			aspect_img() {
				this.pan_img = true
			},
			async getFieldNoList() {
				let that = this;
				let data = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					product_id: this.product_id,
					need_key: 1
				};
				let result = await train.getFieldNoList(data);
				if (result.code == 1) {
					// this.fieldNoList = result.data.result
					let fieldNoList = result.data.result
					fieldNoList.push('11')
					this.fieldNoList = fieldNoList
				}
			},

			getCourtPrice() {
				let that = this;
				let data = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					product_id: this.product_id,
					open_id: uni.getStorageSync("openid"),
					date: that.current_year_month,
					venue_id: this.venue_id
				};
				train.getCourtPrice(data).then(result => {
					if (result.code == 1) {
						this.already = result.data.already
						let fieldlist = result.data.result
						fieldlist.unshift({
							id: "14",
							start_time: "",
							end_time: "",
							fieldlist_s: [],
						})
						this.fieldlist = fieldlist
						console.log(this.fieldlist,'this.fieldlist')
					} else {
						let fieldlist = result.data.result
						fieldlist.unshift({
							id: "14",
							start_time: "",
							end_time: "",
							fieldlist_s: [],
						})
						this.fieldlist = fieldlist
					}
				})

			},
			async getCourtProduct() {
				let that = this;
				let data = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					product_id: this.product_id,
					venue_id: this.venue_id
				};
				let result = await train.getCourtProduct(data);
				if (result.code == 1) {
					this.each_num = result.data.result
					this.text1 = result.data.result.notice
					this.images = result.data.result.icon
					this.court_pic = result.data.result.court_pic
					this.getDataList()
				}
			},
			handledownload(court_pic) {
				const that = this
				wx.downloadFile({
					url: court_pic,
					success: res => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: '保存成功',
										duration: 2000
									})

								},
								fail: function() {
									uni.showToast({
										title: '保存失败',
										duration: 2000
									})

								}
							})
						} else {
							uni.showToast({
								title: '保存失败',
								duration: 2000
							})
						}
					}
				})
			},

			// 获取今天当前日期
			getCurrentMonthDay() {
				var _this = this
				var now = new Date()
				var y = now.getFullYear()
				var m = now.getMonth() + 1
				var d = now.getDate()
				var h = now.getHours(); //获取当前小时数(0-23)
				var min = now.getMinutes(); //获取当前分钟数(0-59)
				if (m < 10) {
					m = '0' + m
				}
				if (d < 10) {
					d = '0' + d
				}
				if (h < 10) {
					h = '0' + h
				}
				if (min < 10) {
					min = '0' + min
				}
				var date = m + '/' + d
				var date_s = m + '-' + d
				_this.current_month_day = date_s
				_this.current_year_month = y + '-' + m + '-' + d
				_this.today = date
				_this.date_d = date
				_this.weeks_data = '今天'
				this.time_list = h + ':' + min
				_this.getCourtPrice()
				let fieldlist = this.fieldlist
				fieldlist.unshift({
					id: "14",
					start_time: "",
					end_time: "",
					fieldlist_s: [],
				})
			},
			// 选择每天日期
			selectDay(item, index) {
				if (this.isLoading) {
					return; // 如果正在加载，则忽略点击
				}
				this.isLoading = true; // 设置加载状态为true
				var _this = this
				_this.fieldlist = []
				_this.fieldlist_s = []
				_this.selectionArr = []
				_this.fieldPoolNum = []
				_this.fieldPool = []
				_this.money = ''
				_this.dayActive = index
				_this.able_list = null
				var now = new Date()
				var y = now.getFullYear()
				_this.date_d = item.mouth + '/' + item.day
				_this.current_year_month = item.year + '-' + item.mouth + '-' + item.day
				_this.current_month_day = item.mouth + '-' + item.day
				_this.current_month_day = item.mouth + '-' + item.day
				_this.weeks_data = item.weeks
				try {
					// 调用异步方法获取法庭价格
					_this.getCourtPrice()
					// 在这里处理获取价格后的逻辑
				} catch (error) {
					// 处理错误情况，比如显示错误信息
					console.error('获取法庭价格失败:', error);
				} finally {
					// 请求完成后无论成功还是失败都重置加载状态
					this.isLoading = false;
				}
				// _this.getCourtPrice()
				let fieldlist = this.fieldlist
				fieldlist.unshift({
					id: "14",
					start_time: "",
					end_time: "",
					fieldlist_s: [],
				})
			},
			// 选择具体场地
			selectData(colum, line, type, index, indexs) {
				this.able_list = colum.text
				colum.select = !colum.select
				let _this = this
				if (colum.half == 1) {
					uni.showToast({
						title: '已经过了半场，是否购买！',
						icon: 'none', //如果要纯文本，不要icon，将值设为'none'
						duration: 2000 //持续时间为 2秒
					})
				}
				if (this.today == this.date_d) {
					if (line.end_time <= this.time_list) {
						uni.showToast({
							title: '已经过了时间段',
							icon: 'none', //如果要纯文本，不要icon，将值设为'none'
							duration: 2000 //持续时间为 2秒
						})
						return
					}
				}
				if (this.able_list && colum.text != this.able_list) {
					uni.showToast({
						title: '不能选择不同类型的场次',
						icon: 'none', //如果要纯文本，不要icon，将值设为'none'
						duration: 2000 //持续时间为 2秒
					})
					return
				}

				// a: 1  包场
				// b: 0  名额
				// c: 0  团
				// maxbooknum: 2 包场
				// maxbooknum_as: 2 团
				// maxbooknum_s: 2 名额
				// text 2 名额  
				// text 1 包场
				// text 3团
				// if (colum.text === 3) {
				// 	if (!colum.select && _this.selectionArr.length == _this.each_num.maxbooknum || !colum.select && _this
				// 		.selectionArr.length == _this.already.zu_tuan) {
				// 		uni.showToast({
				// 			title: '您所订场地数量超过限制',
				// 			icon: 'none', //如果要纯文本，不要icon，将值设为'none'
				// 			duration: 2000 //持续时间为 2秒
				// 		})
				// 		return
				// 	}
				// }
				// if (colum.text === 2) {
				// 	if (!colum.select && _this.selectionArr.length == _this.each_num.maxbooknum_s || !colum.select && _this
				// 		.selectionArr.length == _this.already.ming_e) {
				// 		uni.showToast({
				// 			title: '您所订场地数量超过限制',
				// 			icon: 'none', //如果要纯文本，不要icon，将值设为'none'
				// 			duration: 2000 //持续时间为 2秒
				// 		})
				// 		return
				// 	}
				// }
				// if (colum.text === 1) {
				// 	if (!colum.select && _this.selectionArr.length == _this.each_num.maxbooknum_as || !colum.select &&
				// 		_this.selectionArr.length == _this.already.bao_chang) {
				// 		uni.showToast({
				// 			title: '您所订场地数量超过限制',
				// 			icon: 'none', //如果要纯文本，不要icon，将值设为'none'
				// 			duration: 2000 //持续时间为 2秒
				// 		})
				// 		return
				// 	}
				// }
				// 场地点击事件
				// this.actionJobTest( colum, line, type, index, indexs )

				// 选中
				if (colum.select) {
					//【订场限制逻辑start1】
					//0.判断当前点的场地id是否在池子里且池子里是否已经有m篇场地（_this.each_num.maxbooknum_s）
					console.log('选择逻辑')
					const pos = this.fieldPool.indexOf(colum.field_id);
					if (pos == -1) { //0.1判断当前场地号是否在池子里，如果不在
						if (this.fieldPool.length >= _this.each_num.maxbooknum_s) { //不在判断池子里的数量是否已经满足了限制
							uni.showToast({
								title: '您所订场地号数量超过限制',
								icon: 'none', //如果要纯文本，不要icon，将值设为'none'
								duration: 2000 //持续时间为 2秒
							})
							colum.select = !colum.select
							return
						} else {
							//1.选中后把点的第一个场地id放池子里
							this.fieldPool.push(colum.field_id);
						}
					}
					console.log(this.fieldPool, 'pool')

					//2考虑时间段的问题，统计池子里场地的点击数量
					if (this.fieldPoolNum[colum.field_id]) { //如果有点过这个场地就加1
						this.fieldPoolNum[colum.field_id] = this.fieldPoolNum[colum.field_id] + 1
					} else { //第一次点 ，初始化1
						this.fieldPoolNum[colum.field_id] = 1
					}
					console.log(this.fieldPoolNum, 'poolnum')
					//3.如果该场地的点击次数超过的限制n （_this.each_num.maxbooknum_as）
					if (this.fieldPoolNum[colum.field_id] > _this.each_num.maxbooknum_as) {
						uni.showToast({
							title: '您所订场地时段数量超过限制',
							icon: 'none', //如果要纯文本，不要icon，将值设为'none'
							duration: 2000, //持续时间为 2秒

						})
						this.fieldPoolNum[colum.field_id]--;
						colum.select = !colum.select
						return
					}
					//【订场限制逻辑end1】



					const fieldId = colum.field_id;
					// const fieldId = colum.field_id;

					// // --------------开始-----------
					// console.log(colum.field_id, ';;;')
					// if (!this.fffid) {
					// 	this.fffid = colum.field_id
					// }
					// console.log(this.fffid,'fffid的值');
					// if (_this.fffid == colum.field_id) {

					// } else {
					// 	colum.select = !colum.select
					// 	uni.showToast({
					// 		title: '不能选择不同场地',
					// 		icon: 'none', //如果要纯文本，不要icon，将值设为'none'
					// 		duration: 2000 //持续时间为 2秒
					// 	})
					// 	return
					// }
					// 买票限制
					// 背景色切换
					_this.$set(colum, 'backgroundImage', this.images)
					// _this.$set(colum, 'background', '#ffffff')

					// 获取 X Y 坐标上的时间戳和场地
					let line_time = line.start_time + "-" + line.end_time
					_this.line_time = line_time
					// _this.fieldNoList.forEach((im, idx) => {
					// 	if (indexs === idx) {
					// 		_this.timne_s = im
					// 	}
					// })
					_this.fieldNoList.forEach((im, idx) => {
						let f_id = Number(colum.field_id)
						if (f_id === im.id) {
							_this.timne_s = im.seat_number
							_this.seat_id = im.id
						}
					})
					_this.selectionArr.push({
						'num': this.timne_s,
						'dateTimes': line_time,
						'current_month': _this.current_year_month,
						'price': colum.time_price,
						'month_day': _this.current_month_day,
						'week': _this.weeks_data,
						'text': colum.text,
						'backgroundImage': _this.$set(colum, 'backgroundImage', this.images),
						'pIndex': index,
						'sIndex': indexs,
						'seat_id': this.seat_id,
						'price_id': colum.price_id,
						'meal_id': line.meal_id,
						'time_id': colum.time_id,
						'field_id': colum.field_id,
						'product_id': this.product_id,
						'venueDetail': this.venueDetail,
						'pid': this.pid,
						'court_id': _this.court_id,
						'venue_id': this.venue_id,
						'windows': this.windows
					})
					_this.selectlength = _this.selectionArr.length

					let tj_price_id = []
					let tj_price = []
					let tj_field_id = []
					// let tj_field_type = []
					let tj_time_id = []

					_this.selectionArr.forEach(item => {
						tj_price_id.push(item.price_id)
						tj_price.push(item.price)
						tj_field_id.push(item.field_id)
						// tj_field_type.push(item.text)
						tj_time_id.push(item.time_id)

					})
					this.tj_meal_id = line.meal_id
					this.tj_price_id = tj_price_id
					this.tj_price = tj_price
					this.tj_field_id = tj_field_id
					// this.tj_field_type = tj_field_type
					this.tj_time_id = tj_time_id

					// 总价计算
					let money = _this.money * 1000 + parseFloat(colum.time_price) * 1000
					_this.money = money / 1000

					// if (_this.selectionArr.length > 0) {
					// 	_this.able_list = !null
					// }

				} else {
					//【订场限制逻辑start2】
					//处理取消点击，池子的减少
					//1.先判断该时间段的数量是不是只有1一个了，如果1个就删场地池子，如果不是就-1
					if (this.fieldPoolNum[colum.field_id] > 1) { //如果不是就-1
						this.fieldPoolNum[colum.field_id]--;
					} else {
						this.fieldPoolNum[colum.field_id] = 0;
						//删除场地池子

						const pos = this.fieldPool.indexOf(colum.field_id);
						if (pos !== -1) {
							this.fieldPool.splice(pos, 1)
						} else {
							uni.showToast({
								title: '程序异常',
								icon: 'none', //如果要纯文本，不要icon，将值设为'none'
								duration: 2000 //持续时间为 2秒
							})
							return
						}
					}
					console.log(this.fieldPoolNum, 'poolnum--')

					//【订场限制逻辑end2】	
					// 取消
					_this.$set(colum, 'backgroundImage', '')
					let line_time = line.start_time + "-" + line.end_time
					_this.line_time = line_time
					// _this.fieldNoList.forEach((im, idx) => {
					// 	if (indexs === idx) {
					// 		_this.timne_s = im
					// 	}
					// })
					_this.fieldNoList.forEach((im, idx) => {
						let f_id = Number(colum.field_id)
						if (f_id === im.id) {
							_this.timne_s = im.seat_number
						}
					})
					// 背景色切换
					// _this.$set(colum, 'background', '#ffffff')
					// 删除下面小标签
					for (var i = 0; i < _this.selectionArr.length; i++) {
						if (_this.selectionArr[i].num == _this.timne_s && _this.selectionArr[i].dateTimes == _this
							.line_time) {
							_this.selectionArr.splice(i, 1)
						}
					}
					_this.selectlength = _this.selectionArr.length
					// 总价计算
					let money = _this.money * 1000 - parseFloat(colum.time_price) * 1000
					_this.money = money / 1000
					// let money = _this.money*100 - Number(colum.time_price)*100
					// _this.money = money/100
					if (_this.selectionArr.length == 0) {
						_this.able_list = null
						this.fffid = ''
					}
				}


				this.fieldlist = JSON.parse(JSON.stringify(this.fieldlist))
			},
			// 删除
			removeData(im, indexx) {
				let _this = this
				const pItem = this.fieldlist[im.pIndex]
				const item = pItem.fieldlist_s[im.sIndex]
				this.selectData(item, pItem, 1, im.pIndex, im.sIndex)
			},
			// 每天周期
			getDataList() {

				let day = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
				let dataList = []
				for (let i = 0; i < this.each_num.days; i++) {
					let date = new Date()
					let nextData = date.setDate(date.getDate() + i)
					let Date2 = new Date(nextData)
					let obj = {
						year: Date2.getFullYear().toString().padStart(2, '0'),
						mouth: (Date2.getMonth() + 1).toString().padStart(2, '0'),
						day: Date2.getDate().toString().padStart(2, '0'),
						weeks: day[Date2.getDay()]
					}
					if (i == 0) {
						obj.weeks = '今天'
					}

					dataList.push(obj)
					this.dataList = dataList
				}
			},

			miniClickCourts() {
				uni.redirectTo({
					url: `./stadium_details?selectionArr=${encodeURIComponent(JSON.stringify(this.selectionArr))}`,
				})

			},
			miniClickCourt() {
				let _this = this;
				setTimeout(() => {
					let data = {
						project_id: getApp().globalData.projectId,
						product_id: this.product_id,
						app_id: this.$https.weixinAppId,
						open_id: uni.getStorageSync("openid"),
						date: _this.current_year_month,
						court_id: _this.court_id,
						meal_id: _this.tj_meal_id,
						price_id: _this.tj_price_id.toString(),
						time_id: _this.tj_time_id.toString(),
						// field_type: _this.tj_field_type.toString(),
						field_type: _this.selectionArr[0].text,
						price: _this.tj_price.toString(),
						field_id: _this.tj_field_id.toString(),
					};
					train.miniClickCourt(data).then(result => {
						// if (result.code == 1) {
						// 	let times=new Date()
						// 	uni.navigateTo({
						// 		url: `./stadium_details?selectionArr=${encodeURIComponent(JSON.stringify(this.selectionArr))}`+
						// 			"&class_id=" +  result.data.result,
						// 	})
						// }
						if (result.data.code == 1002) {
							return uni.showToast({
								title: "选场已满!",
								icon: "none",
								duration: 2000, // 这个弹窗显示多少毫秒
							});
						} else {
							uni.navigateTo({
								url: `./stadium_details?selectionArr=${encodeURIComponent(JSON.stringify(this.selectionArr))}` +
									"&class_id=" + result.data.result,
							})
						}
					})
					// let result = await train.miniClickCourt(data);
					// if (result.code == 1) {
					// 	uni.navigateTo({
					// 		url: `./stadium_details?selectionArr=${encodeURIComponent(JSON.stringify(this.selectionArr))}`,
					// 	})
					// }
				}, 500)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.control {
		width: 100%;
		background-color: #F7F7F7;
		height: 100vh;
		position: relative;
		padding-bottom: 200rpx;

		.time-list {
			padding: 8rpx 30rpx;
			display: flex;
			align-items: center;

			.time-item {
				flex: 1;
				padding: 15rpx 0;
				border-radius: 10rpx;
				color: #333333;
				display: flex;
				flex-direction: column;
				align-items: center;

				.day {
					font-size: 22rpx;
					font-weight: bold;
				}

				.date {
					font-family: PingFang SC;
					// font-weight: bold;
					font-size: 19rpx;
					margin-top: 10rpx;
				}
			}

			.active {
				background-color: #FF8E05;
				color: white;
			}
		}

		.table-box {
			display: flex;
			background-color: white;
		}

		.colum {
			display: block !important;
		}

		.table {
			height: 1100rpx;
			// background-color: #DF42D9;
		}

		.table_sty {
			height: 920rpx;
			// background-color: #008CFF;
		}

		.tar {
			display: flex;
			// margin-top: 4rpx;

			.tad {
				width: 114rpx;
				height: 70rpx;
				margin-right: 8rpx;
				// margin-top: 4rpx;
				flex-shrink: 0;
				background: #EAEAEA;
				// border-radius: 8px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.price-box {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
				
					.price {
						font-size: 22rpx;
						font-weight: 400;
						color: #FFFFFF;
						// line-height: 28rpx;
						text-align: center;
				
						text {
							font-size: 20rpx;
						}
					}
				
					// .pr{
					// 	background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/c0ffde6259461898a3c96774125900aee2346d52.png') no-repeat;
					// 	background-size: 100% 100%;
					// }
				
					.price-2 {
						font-size: 20rpx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
			.name {
				border-radius: 0 !important;
				background-color: white;
				color: #303030;
				font-size: 22rpx;
				// margin-top: 4rpx;
			}
			.date {
				color: #333333;
				font-size: 20rpx;
				// border-radius: 0 !important;
				background-color: white;
				margin-top: 5rpx;
				// margin-top: 9rpx;
			
				// width: 114rpx;
				// height: 90rpx;
				// margin-right: 8rpx;
				// margin-top: 9rpx !important;
				// flex-shrink: 0;
				// background: #EAEAEA;
				// display: flex;
				// flex-direction: column;
				// justify-content: center;
				// align-items: center;
			
				// .date-1 {
				// 	position: relative;
				// 	padding-bottom: 12rpx;
			
				// 	&:after {
				// 		content: '-';
				// 		display: block;
				// 		position: absolute;
				// 		bottom: -5rpx;
				// 		left: 0;
				// 		right: 0;
				// 		width: fit-content;
				// 		margin: auto;
				// 	}
				// }
			
				// &:first-of-type {
				// 	margin: 0;
				// }
			}
			
			.name {
				border-radius: 0 !important;
				background-color: white;
				color: #303030;
				font-size: 22rpx;
				// margin-top: 4rpx;
			}
			
			.select-td {
				background-color: #df42d9;
			}
			
			.select-grey {
				background: #EAEAEA;
			}
			
			.select-blue {
				background: #59A0FFFF;
			}
			
			.select-ash {
				background: #EAEAEA;
			}
		}

		.tr {
			display: flex;
			// margin-top: 4rpx;
			margin-bottom: 4rpx;

			.td {
				width: 114rpx;
				height: 70rpx;
				margin-right: 8rpx;
				// margin-top: 4rpx;
				flex-shrink: 0;
				background: #EAEAEA;
				// border-radius: 8px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.price-box {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;

					.price {
						font-size: 22rpx;
						font-weight: 400;
						color: #FFFFFF;
						// line-height: 28rpx;
						text-align: center;

						text {
							font-size: 20rpx;
						}
					}

					// .pr{
					// 	background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/c0ffde6259461898a3c96774125900aee2346d52.png') no-repeat;
					// 	background-size: 100% 100%;
					// }

					.price-2 {
						font-size: 20rpx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}

			.date {
				color: #333333;
				font-size: 20rpx;
				// border-radius: 0 !important;
				background-color: white;
				margin-top: 5rpx;
				// margin-top: 9rpx;

				// width: 114rpx;
				// height: 90rpx;
				// margin-right: 8rpx;
				// margin-top: 9rpx !important;
				// flex-shrink: 0;
				// background: #EAEAEA;
				// display: flex;
				// flex-direction: column;
				// justify-content: center;
				// align-items: center;

				// .date-1 {
				// 	position: relative;
				// 	padding-bottom: 12rpx;

				// 	&:after {
				// 		content: '-';
				// 		display: block;
				// 		position: absolute;
				// 		bottom: -5rpx;
				// 		left: 0;
				// 		right: 0;
				// 		width: fit-content;
				// 		margin: auto;
				// 	}
				// }

				// &:first-of-type {
				// 	margin: 0;
				// }
			}

			.name {
				border-radius: 0 !important;
				background-color: white;
				color: #303030;
				font-size: 22rpx;
				// margin-top: 4rpx;
			}

			.select-td {
				background-color: #df42d9;
			}

			.select-grey {
				background: #EAEAEA;
			}

			.select-blue {
				background: #59A0FFFF;
			}

			.select-ash {
				background: #EAEAEA;
			}
		}

		.footer {
			padding: 30rpx 30rpx;
			background-color: white;
			position: fixed;
			bottom: 0;
			width: 100%;
			left: 0;

			.footer-1 {
				.info-1 {
					font-size: 28rpx;
					color: #333333;
				}

				.info-2 {
					font-size: 28rpx;
					font-weight: 500;
					color: #FF4105;

					text {
						font-weight: 700;
						font-size: 40rpx;
					}
				}

				.btn {
					width: 35%;
					color: white;
					padding: 15rpx 0;
					font-size: 28rpx;
					text-align: center;
					border-radius: 30px;
					background-color: #dcdcdc;
				}

				.btn_n {
					width: 35%;
					color: white;
					padding: 15rpx 0;
					font-size: 28rpx;
					text-align: center;
					border-radius: 30px;
					background-color: #59A0FFFF;
				}
			}

			.footer-2 {
				margin-bottom: 15rpx;

				.info-1 {
					font-size: 22rpx;
					font-weight: bold;
					color: #008CFF;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 8rpx;
					}
				}

				.info-2 {
					flex: 1;
					margin-left: 60rpx;

					.tag-item {
						font-size: 24rpx;
						font-weight: bold;
						color: #333333;

						.color {
							width: 28rpx;
							height: 28rpx;
							background: #EAEAEA;
							border-radius: 4rpx;
							margin-right: 15rpx;
						}

						.color2 {
							background-color: #6373e8;
						}

						.color3 {
							background-color: #a6ccff;
						}

						.color4 {
							background-color: #df42d9;
						}
					}
				}
			}

			.footer-3 {
				display: flex;
				margin-bottom: 30rpx;

				.item {
					background: #F3F3F3;
					border-radius: 5px;
					flex-shrink: 0;
					width: fit-content;
					margin-top: 20rpx;
					margin-right: 40rpx;
					position: relative;

					.icon {
						position: absolute;
						top: -14rpx;
						right: -14rpx;
					}

					.item-time {
						font-size: 22rpx;
						background: #DF42D9;
						color: #FFFFFF;
						text-align: center;
						padding: 5rpx 0;
						border-radius: 5px 5px 0 0;
					}

					.item-con {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						padding: 16rpx;
						font-size: 22rpx;
						font-weight: bold;

						.item-con1 {

							color: #333333;
							margin-bottom: 15rpx;
						}

						.item-con2 {
							color: #DF42D9;
						}
					}
				}
			}
		}
	}
</style>